<template>
    <div>
        <div id="Video" class="video-components">
            <div class="video-wrap">
                <!--<video-->
                <!--ref="video"-->
                <!--v-if="videoShow"-->
                <!--class="js_myVideo myVideo"-->
                <!--x5-playsinline="true"-->
                <!--playsinline="true"-->
                <!--webkit-playsinline="true"-->
                <!--x-webkit-airplay="true"-->
                <!--preload-->
                <!--x5-video-player-type="h5"-->
                <!--video-player-type="h5"-->
                <!--x5-video-player-fullscreen='true'-->
                <!--x5-video-ignore-metadata='true'-->
                <!--:loop="videoMsg.loop"-->
                <!--:poster="videoMsg.poster"-->
                <!--:autoplay="videoMsg.autoplay"-->
                <!--x5-video-orientation="portraint"-->
                <!--video-orentation="portraint"-->
                <!--@ended="playEnd">-->
                <!--<source :src="videoMsg.videoUrl" type='video/mp4'>-->
                <!--您的浏览器不支持 video 标签。-->
                <!--</video>-->
                <!-- x5-video-player-type="h5"
                        video-player-type="h5"-->
                <div class="swiper-wrap" style="height: 100vh;">
                    <div ref="video1" class="positionR video-wrap" style="height: 100vh;">
                        <div class="video-top" @click="slideUp">click</div>
                        <video
                                ref="video"
                                class="js_myVideo myVideo"
                                x5-playsinline="true"
                                playsinline="true"
                                webkit-playsinline="true"
                                x-webkit-airplay="true"
                                preload
                                controls
                                x5-video-player-type="h5"
                                video-player-type="h5"
                                x5-video-player-fullscreen='true'
                                x5-video-ignore-metadata='true'
                                x5-video-orientation="portraint"
                                video-orentation="portraint"
                                :loop="true"
                              >
                            <source src="https://oss.haokanhaowan.cn/video/look/19072314_dev/f96322e73969cf7363b76b2f28866fd8.mp4" type='video/mp4'>
                            您的浏览器不支持 video 标签。
                        </video>
                    </div>
                    <div ref="video2" class="positionR video-wrap" style="height: 100vh;">
                        <div class="video-top" @click="slideDown">sdfsdfsdf</div>
                        <video
                                ref="video"
                                class="js_myVideo myVideo"
                                x5-playsinline="true"
                                playsinline="true"
                                webkit-playsinline="true"
                                x-webkit-airplay="true"
                                preload
                                controls
                                x5-video-player-type="h5"
                                video-player-type="h5"
                                x5-video-player-fullscreen='true'
                                x5-video-ignore-metadata='true'
                                x5-video-orientation="portraint"
                                video-orentation="portraint"
                                :loop="true"
                        >
                            <source src="https://oss.haokanhaowan.cn/video/look/19072314_dev/f96322e73969cf7363b76b2f28866fd8.mp4" type='video/mp4'>
                            您的浏览器不支持 video 标签。
                        </video>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "testvideo",
        methods:{
            videoControls(){
                this.$refs.video.play();
            },
            slideDown(){
                $('.swiper-wrap').css('transform','translateY(0)')
                // $('.swiper-wrap').css('top','0')
                // this.$refs.video1.style.transfrom = 'translateY(0)'
                // this.$refs.video2.style.transfrom = 'translateY(0)'
            },
            slideUp(){
                $('.swiper-wrap').css('transform','translateY(-100vh)')
                // $('.swiper-wrap').css('top','-100vh')
                // this.$refs.video1.style.transfrom = 'translateY(100vh)'
                // this.$refs.video2.style.transfrom = 'translateY(100vh)'
                console.log($('.swiper-wrap').css('transform'))
            }
        }
    }
</script>

<style scoped>
    .video-top{
        color: red;
        width: 100%;
        height: 50px;
        position: absolute;
        left: 50%;
        top: 10%;
        z-index: 1050;
        font-size: 50px;
        background-color: #ccc;
        transition: all .5s ;
    }
    .swiper-wrap{
        transition: all .5s ;

        position: relative;
    }
    .myVideo{
        width: 100%;
        min-height: 100%;
        position: relative;
        z-index: 1;
    }
    .video-wrap{
        position: relative;
        -webkit-transition: all .5s ;
        -moz-transition: all .5s ;
        -ms-transition: all .5s ;
        -o-transition: all .5s ;
        transition: all .5s ;
    }
</style>